import './index.scss';
import store from "../../../store";//哪个组件需要用到store的数据就在哪个组件引入
import { observer } from 'mobx-react'  //观察者,被它所包裹的组件就是响应式的，改了数据页面就会更新
import { Button, Space, Modal, Form, Input, Select, Table, message } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
const { Option } = Select;

//解构出子模块
const { channel } = store;

const PindaoAdd = () => {
    const [select,setSelect] = useState([])//所选id
    const [isAddOpen, setisAddOpen] = useState(false);//新增模态框setisEditOpen
    const [isEditOpen, setisEditOpen] = useState(false);//编辑模态框
    //新增弹框中选择图片
    const [img, setImg] = useState();
    //编辑弹框中选择图片
    const [editImg, setEditImg] = useState();
    //上传图片
    const file = useRef(null)


    // 多条件查询
    const [queryform] = Form.useForm();
    // 编辑作者
    const [editform] = Form.useForm();

    useEffect(() => {
        if (channel.channels.length === 0) {
            channel.getAllChannel()
        }
    }, [])
    const columns = [

        {
            title: '频道名称',
            dataIndex: 'channelName',
            key: 'channelName',
        },
        {
            title: '所属app',
            dataIndex: 'channelApp',
            key: 'channelApp',
        },
        {
            title: '权重',
            dataIndex: 'weight',
            key: 'weight'
        },
        {
            title: '操作',
            render: (_, record) => (
                <Button type={"link"} onClick={() => { EditAuthor(record) }}>编辑</Button>
            )

        },
    ];
    //------------------------------------------多条件查询-----------------
    const onFinish = (values) => {
        console.log('查询 ', values);
    };
    const submit = () => {
        const a = queryform.getFieldsValue(true)
        console.log(a)
        // channel.getQueryauthor(a)
    };
    const onReset = () => {
        queryform.resetFields();
    };

    //----------------------新增模态框--------------------
    const [addform] = Form.useForm();
    const addAuthor = () => {
        console.log('新增')
        setisAddOpen(true);
    }
    const AddOk = () => {
        console.log("模态框确认")
        console.log("新增信息", addform.getFieldsValue());
        const obj = addform.getFieldsValue()
        channel.getAdd(obj)
        //发送添加请求
        // channel.addAuthor(addform.getFieldsValue())
        setisAddOpen(false);
    };
    const AddCancel = () => {
        console.log("取消")
        setImg();
        setisAddOpen(false);

    };
    //------------------------冻结确认模态框------------

    //------------------------解冻确认模态框-----------------

    //------------------------删除确认模态框------------------
    const delAuthor = () => {
        console.log('删除');
        // if (channel.selectAuthors.length === 0) {
        //     return message.warn('请选择要删除的作者！')
        // }
        Modal.confirm({
            title: `确认删除吗？`,
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
                // channel.selectAuthors.forEach((v, i) => {
                //     arr.push(v.id);
                // })
                // console.log(arr);
                // channel.delAuthor(arr);
                //调用删除方法
                channel.getSelect(select)
                message.success('删除用户成功！')
            },
            onCancel: () => {
                message.info('已取消删除用户')
            }
        })
    }
    //------------------------编辑----------------------------
    // 用于存储编辑行的完整数据
    const [editData, setEditData] = useState();
    // 编辑点击事件
    const EditAuthor = (val) => {
        console.log("编辑项数据", val);
        // 存储编辑行的完整数据
        setEditData(val);
        // 图片路径
        setEditImg(val.headPortrait)
        // 回显数据到编辑模态框中的表单
        editform.setFieldsValue(val);
        // 打开编辑模态框
        setisEditOpen(true);
    }

    const EditOk = () => {
        console.log("编辑模态框确认")
        console.log("编辑后的表单数据", editform.getFieldsValue());
        // 将修改前的完整数据与修改的部分数据组合
        const newdata = { editData, ...editform.getFieldsValue() }
        console.log("组合后的数据", newdata);
        // channel.editAuthor(newdata)  
        editform.resetFields();
        const obj = addform.getFieldsValue()
        channel.getAdd(obj)
        setisEditOpen(false);

    };
    const EditCancel = () => {
        console.log("编辑模态框取消")
        setisEditOpen(false);
        editform.resetFields();
    };
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            setSelect(selectedRows)
        }
    }
    const [selectionType, setSelectionType] = useState('checkbox');
    //-------------------------上传头像handler
    return (<div className='authorBigBox' >
        <div className='queryBox'>
            <Form
                form={queryform}
                name='authorform'
                onFinish={onFinish}
                layout="inline"
            >
                <Space size={"middle"}>
                    <Form.Item
                        label="频道名称"
                        name="writerName"
                    >
                        <Input placeholder='频道名称' />
                    </Form.Item>
                    <Button onClick={onReset} className='btnStyle'>重置</Button>
                    <Button type='primary' onClick={submit} className='btnStyle'>搜索</Button>
                </Space>

            </Form>
        </div>
        {/* --------------------------功能按键--------------------- */}

        <div className='optionBox' >
            <Space size={'large'}>
                <Button type='primary' className='btnStyle' onClick={addAuthor}>新增</Button>
                <Button type='primary' className='btnStyle' onClick={delAuthor}>删除</Button>
            </Space>
        </div >
        {/*-------------------------新增弹框---------------------*/}
        < Modal title="添加作者"
            open={isAddOpen}
            onOk={AddOk}
            onCancel={AddCancel}
            okText="保存"
            cancelText="取消" >
            <Form
                form={addform}
                name="addform"
                labelCol={{ span: 4 }}>

                <Form.Item
                    name="createtime"
                    label="所属app"
                >
                    <Select style={{ width: 120 }}>
                        <Option value='小黑早教'>小黑早教</Option>
                        <Option value='小黑绘本'>小黑绘本</Option>
                        <Option value='萌萌乐卡通'>萌萌乐卡通</Option>
                        <Option value='萌萌乐儿歌'>萌萌乐儿歌</Option>
                        <Option value='萌萌乐歌'>萌萌乐歌</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    name="name"
                    label="频道名称"
                    rules={[
                        {
                            required: true,
                            message: '请输入频道名称',
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="des"
                    label="权重"
                    rules={[{ required: true, message: '请输入权重' }]}
                >
                    <Input />
                </Form.Item>
            </Form>
        </Modal >
        {/*-------------------------编辑弹框---------------------------*/}
        < Modal title="编辑作者"
            open={isEditOpen}
            onOk={EditOk}
            onCancel={EditCancel}
            okText="保存"
            cancelText="取消"
            destroyOnClose={true}
            getContainer={false}
        >
            <Form
                form={editform}
                name="EditAuthor"
                labelCol={{ span: 4 }}
            >
                <Form.Item
                    name="createtime"
                    label="所属app"
                    rules={[{ required: true, message: '输入的作者名称不合法', whitespace: true }]}
                >
                    <Select style={{ width: 120 }}>
                        <Option value='小黑早教'>小黑早教</Option>
                        <Option value='小黑绘本'>小黑绘本</Option>
                        <Option value='萌萌乐卡通'>萌萌乐卡通</Option>
                        <Option value='萌萌乐儿歌'>萌萌乐儿歌</Option>
                        <Option value='萌萌乐歌'>萌萌乐歌</Option>
                    </Select>
                </Form.Item>
                <Form.Item
                    name="name"
                    label="名称"
                    rules={[{ required: true, message: '输入的作者名称不合法', whitespace: true }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="des"
                    label="权重"
                    rules={[{ required: true, message: '请输入权重' }]}
                >
                    <Input />
                </Form.Item>

            </Form>
        </Modal >

        {/* --------------------------------表格+分页------------------- */}
        < div className='tableBox' >
            <Table
                rowSelection={{
                    type: selectionType,
                    ...rowSelection,
                }}
                columns={columns}
                dataSource={channel.channels}
                // rowKey={(record) => record.id}
                pagination={{
                    pageSize: 5,
                    // onChange(page,pageSize){
                    //     Author.getAllauthor(page)
                    // } 
                }}
                bordered />
        </div >
    </div >)
}
export default observer(PindaoAdd);